<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博文发布</title>
  <link th:href="@{/images/me.jpg}" href="../../static/images/me.jpg" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" th:href="@{/lib/editor.md-master/css/editormd.min.css}" href="../../static/lib/editor.md-master/css/editormd.min.css">
  <link rel="stylesheet" th:href="@{/css/me.css}" href="../../static/css/me.css">
</head>
<body>

  <!--导航-->
  <nav class="ui inverted gird-header" >
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui olive header item" style="font-family: STSong">管理后台</h2>
        <a href="#" th:href="@{/admin/blogs}" class="active m-item item m-mobile-hide"><i class="home icon"></i>文章管理</a>
        <a href="#" th:href="@{/admin/types}" class=" m-item item m-mobile-hide"><i class="clone outline icon"></i>分类管理</a>
        <a href="#" th:href="@{/admin/friendlinks}" class=" m-item item m-mobile-hide"><i class="pencil alternate icon"></i>友链管理</a>
        <a href="#" th:href="@{/admin/pictures}" class=" m-item item m-mobile-hide"><i class="image icon"></i>相册管理</a>
        <!--最右上角的头像和注销 只有用户登陆了,才会显示-->
        <div class="right m-item m-mobile-hide menu" th:if="${session.loginedadmin}">
          <!--注意下面这个下拉菜单, 必须加一个JavaScript代码才能显示出来 JavaScript代码在下面-->
          <div class="ui dropdown  item">
            <div class="text">
              <!--这里有一个th, 让我给删了, 这个th的作用是, 动态显示别的用户的头像. 现在这个头像链接是死代码. 那行代码到lirenmi的项目去找-->
              <img class="ui avatar image" src="/images/dajiavatar.jpg">
              <!--非常重要, model.addAttribute传对象 的前端接收!-->
              <span th:text="${session.loginedadmin.nickname}"></span>
            </div>
            <!--必须加一个JavaScript代码才能显示出来 JavaScript代码在下面-->
            <i class="dropdown icon"></i>
            <div class="menu">
              <a class="item" th:href="@{/admin/adminlogout}">注销</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>
  <div class="m-padded-tb-hugex">
    <div class="ui menu attached inverted" style="background-color:rgba(255, 255, 255, 0.1)">
      <div class="ui container" >
        <a th:href="@{/admin/blogs/input}" class="active item" >发布</a>
        <a th:href="@{/admin/blogs}" class="item">列表</a>
      </div>
    </div>
  </div>


  <!--中间内容-->
  <div  class="">
    <div class="ui container">
      <!--如果是新增博客，新增博客的id是0，就走@{/admin/blogs}， 如果是修改博客的话，就走@{/admin/blogs/{id}(id=*{id})}-->
      <form id="blog-form" action="#" th:object="${blog}" th:action="*{id}==0 ? @{/admin/blogs} : @{/admin/blogs/{id}(id=*{id})}" method="post" class="ui form" enctype="multipart/form-data">
        <input type="hidden" name="published" th:value="*{published}">
        <input type="hidden" name="id" th:value="*{id}">

        <div class="required field">
          <div class="ui left labeled input">
            <div class="ui selection compact teal basic dropdown label">
              <!--如果啥也不选择，默认就是原创。-->
              <input type="hidden" value="原创" name="flag" th:value="*{flag} ? *{flag} : '原创'" >
              <i class="dropdown icon"></i>
              <div class="text">原创</div>
              <div class="menu">
                <div class="item" data-value="原创">原创</div>
                <div class="item" data-value="转载">转载</div>
                <div class="item" data-value="翻译">翻译</div>
              </div>
            </div>
            <input type="text" name="title" placeholder="标题" th:value="*{title}">
          </div>
        </div>

        <div class="required field">
          <div class="" id="md-content" style="z-index: 1 !important;">
            <textarea placeholder="博客内容" name="content" style="display: none" th:text="*{content}"></textarea>
          </div>
        </div>

        <div class="two fields">
          <div class=" field">
            <div class="ui left labeled action input">
              <label class="ui compact teal basic label">分类</label>
              <div class="ui fluid selection multiple search  dropdown">
                <!--
                  首先，解释下 *{typeIds} 是啥意思?  其等价于 ${blog.typeIds} 这是thymeleaf的一种简写形式
                  本质上和上面的*接收是一样的
                -->
                <input type="hidden" name="typeIds" th:value="*{typeIds}" >
                <i class="dropdown icon"></i>
                <div class="default text">分类</div>
                <div class="menu">
                  <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">java</div>
                </div>
              </div>
            </div>
          </div>

          <div class="required field">
            <div class="ui left labeled input">
              <label class="ui teal basic label">首图</label>
              <!--<input type="text" name="firstPicture" th:value="*{firstPicture}" placeholder="首图引用地址">-->
              <input type="file" name="uploadPicture"  placeholder="首图引用地址">
            </div>
          </div>
        </div>

        <div class="required field">
          <textarea name="description" placeholder="博客描述..." maxlength="200" th:text="*{description}"></textarea>
        </div>

        <div class="inline fields">
          <div class="field">
            <div class="ui checkbox">
              <input type="checkbox" id="recommend" name="recommend" checked th:checked="*{recommend}" class="hidden">
              <label for="recommend"><font color="#faebd7">推荐</font></label>
            </div>
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input type="checkbox" id="shareStatement" name="shareStatement" th:checked="*{shareStatement}" class="hidden">
              <label for="shareStatement"><font color="#faebd7">转载声明</font></label>
            </div>
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input type="checkbox" id="appreciation" name="appreciation" th:checked="*{appreciation}" class="hidden">
              <label for="appreciation"><font color="#faebd7">赞赏</font></label>
            </div>
          </div>
          <div class="field">
            <div class="ui checkbox">
              <input type="checkbox" id="commentabled" name="commentabled" th:checked="*{commentabled}" class="hidden">
              <label for="commentabled"><font color="#faebd7">评论</font></label>
            </div>
          </div>
        </div>

        <div class="ui error message"></div>

        <div class="ui right aligned container">
          <button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button>
          <button type="button" id="save-btn" class="ui secondary button">保存</button>
          <button type="button" id="publish-btn" class="ui teal button">发布</button>
        </div>

      </form>
    </div>
  </div>

  <br>
  <br>
  <!--底部栏-->



  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <script th:src="@{/lib/editor.md-master/editormd.min.js}" src="../../static/lib/editor.md-master/editormd.min.js" ></script>


  <script>

      // $('#newblog-container').load(/*[[@{/footer/newblog}]]*/"/footer/newblog");


      $('#blog-message').load(/*[[@{/footer/blogmessage}]]*/"/footer/blogmessage");

      // 运行时间统计
      function secondToDate(second) {
          if (!second) {
              return 0;
          }
          var time = new Array(0, 0, 0, 0, 0);
          if (second >= 365 * 24 * 3600) {
              time[0] = parseInt(second / (365 * 24 * 3600));
              second %= 365 * 24 * 3600;
          }
          if (second >= 24 * 3600) {
              time[1] = parseInt(second / (24 * 3600));
              second %= 24 * 3600;
          }
          if (second >= 3600) {
              time[2] = parseInt(second / 3600);
              second %= 3600;
          }
          if (second >= 60) {
              time[3] = parseInt(second / 60);
              second %= 60;
          }
          if (second > 0) {
              time[4] = second;
          }
          return time;
      }
      function setTime() {
          /*此处为网站的创建时间*/
          var create_time = Math.round(new Date(Date.UTC(2020, 01, 25, 15, 15, 15)).getTime() / 1000);
          var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
          currentTime = secondToDate((timestamp - create_time));
          currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
              + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
              + '秒';
          document.getElementById("htmer_time").innerHTML = currentTimeHtml;
      }
      setInterval(setTime, 1000);


    //初始化Markdown编辑器
    var contentEditor;
    $(function() {
      contentEditor = editormd("md-content", {
        width   : "100%",
        height  : 640,
        syncScrolling : "single",
//        path    : "../static/lib/editormd/lib/"
        path    : "/lib/editor.md-master/lib/",
          /*上传图片成功后可以做一些自己的处理*/
          onload: function () {
              //console.log('onload', this);
              //this.fullscreen();
              //this.unwatch();
              //this.watch().fullscreen();
              //this.width("100%");
              //this.height(480);
              //this.resize("100%", 640);
          }
      });
    });
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
      on : 'hover'
    });

    //点击保存，会将published设置成false，同时提交表单
    $('#save-btn').click(function () {
      $('[name="published"]').val(false);
      $('#blog-form').submit();
    });

      //点击提交，会将published设置成true，同时提交表单
    $('#publish-btn').click(function () {
      $('[name="published"]').val(true);
      $('#blog-form').submit();
    });



    $('.ui.form').form({
      fields : {
        title : {
          identifier: 'title',
          rules: [{
            type : 'empty',
            prompt: '提示：请输入博客标题'
          }]
        },
          /*flag : {
              identifier: 'flag',
              rules: [{
                  type : 'empty',
                  prompt: '提示：请选择博客类型(原创或转载)'
              }]
          },*/
        content : {
          identifier: 'content',
          rules: [{
            type : 'empty',
            prompt: '提示：请输入博客内容'
          }]
        },
        typeId : {
          identifier: 'type.id',
          rules: [{
            type : 'empty',
            prompt: '提示：请输入博客分类'
          }]
        },
        /*firstPicture : {
          identifier: 'firstPicture',
          rules: [{
            type : 'empty',
            prompt: '提示：请输入博客首图'
          }]
        },*/
        description : {
          identifier: 'description',
          rules: [{
            type : 'empty',
            prompt: '提示：请输入博客描述'
          }]
        }
      }
    });

  </script>
</body>
</html>